<template>
  <div class="page">
    <!-- header区域 -->
    <z-header>购物车</z-header>
    <shopart-box
      @refresh="refreshCar"
      v-if="carList.length > 0"
      :carList="carList"
      @delCartClicked="handCartClicked"
    ></shopart-box>

    <div v-else>
      <div class="shopcart-empty">
        <img
          src="//img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
        />
        <p>购物车空空如也，去逛逛吧~</p>
      </div>
    </div>
    <van-submit-bar
      :price="$store.getters.getCountPrie * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox :value="allChecked" checked-color="#F63515" @click="handAllChecked">全选</van-checkbox>
    </van-submit-bar>

    <section class="recommend">
      <div class="recommend-title">
        <van-divider :style="{borderColor:'#ccc',padding:'0 16px'}">可能你还想要</van-divider>
      </div>
      <recommend class="recm-style"></recommend>
    </section>

    <tab-bar :active="2"></tab-bar>
  </div>
</template>

<script>
import TabBar from "../../components/tabBar.vue";
import zHeader from "@/components/common/z-header.vue";
import shopartBox from "@/components/common/shopart-box.vue";
import { submitToCar } from "../../api";
import Recommend from "../../components/common/recommend.vue";
import { mapState } from "vuex";
import { delCar } from "../../api";
export default {
  components: {
    TabBar,
    zHeader,
    shopartBox,
    Recommend,
  },
  computed: {
    ...mapState(["carList", "allChecked"]),
  },
  data() {
    return {};
  },
  created() {
    this.cartData();
  },
  methods: {
    onSubmit() {
      console.log("submit");
    },
    cartData() {
      this.$store.dispatch("getCartData");
    },
    //全选或取消全选
    handAllChecked() {
      this.$store.dispatch("changeAllChecked");
    },
    //购物车数据 步进器 点击了 加号减号并更后的事件
    refreshCar(params) {
      console.log(params);
      submitToCar(params, (res) => {
        console.log(res);
      });
    },
    // 子组件 删除 数据 触发的方法
    handCartClicked(item) {
      delCar({ id: item.id }, (res) => {
        if (res.status === 0) {
          console.log(res);
          console.log("删除成功！");
          // 删除成功 之后 再次获取 购物车数据
          this.cartData();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../commin/style/mixin";
.recm-style {
  padding-bottom: 50px;
}
.page {
  background-color: #f7f7f7;
  padding: 0;
  .recommend {
    margin-bottom: 100px;
    .recommend-title {
      width: 100%;
      height: 90px;
      padding: 20px 20px;
      line-height: 90px;
      background: #fff;
      @include boxSizing;
    }
  }
  .van-submit-bar {
    bottom: 112px;
    background-color: #f7f7f7;
  }
  .shopcart-empty {
    width: 100%;
    padding: 60px 0;
    text-align: center;
    background: #f7f7f7;

    p {
      font-size: 30px;
      padding-top: 20px;
      color: rgba(51, 51, 51, 0.66);
    }
  }
}
</style>